import { lazy, Suspense } from 'react'
import Loading from '@/pages/Loading'
import AuthRoute from './AuthRoute'
import { Navigate } from 'react-router-dom'
const Layout = lazy(() => import('@/pages/Layout'))
const Login = lazy(() => import('@/pages/Login'))
const NotFound = lazy(() => import('@/pages/NotFound'))
// 后台首页
const Index = lazy(() => import('@/pages/Index'))
// 文章列表
const ArticleList = lazy(() => import('@/pages/ArticleList'))
// 发布文章
const ArticlePublish = lazy(() => import('@/pages/ArticlePublish'))

// 配置路由对象
const routes = [
  {
    path: '/',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        {/* 权限验证的 */}
        <AuthRoute>
          <Layout></Layout>
        </AuthRoute>
      </Suspense>
    ),
    children: [
      {
        path: '',
        element: <Navigate to="index"></Navigate>,
      },
      {
        path: 'index',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            {/* 权限验证的 */}
            <AuthRoute>
              <Index></Index>
            </AuthRoute>
          </Suspense>
        ),
      },
      {
        path: 'list',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            {/* 权限验证的 */}
            <AuthRoute>
              <ArticleList></ArticleList>
            </AuthRoute>
          </Suspense>
        ),
      },
      {
        path: 'publish',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            {/* 权限验证的 */}
            <AuthRoute>
              <ArticlePublish></ArticlePublish>
            </AuthRoute>
          </Suspense>
        ),
      },
    ],
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        <Login></Login>
      </Suspense>
    ),
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        <NotFound></NotFound>
      </Suspense>
    ),
  },
]

// 导出路由对象
export default routes
